<template>
	<mainHeader title="返回" :haveBack="true" goto="back"></mainHeader>
	<scroll-view scroll-y class="theDetail_scroll">
		<view class="theDetail">
			<view class="theDetail_main" v-if="theOne">
				<view class="theDetail_class base_box_round oneLine" :class="tagClass">
					{{theOne.showOne}}
				</view>
				<ClickShowTextVue :text="String(theOne.addValue)">
					<view class="theDetail_value" :class="tagClass">
						{{moneySymbol}}{{takeBigNumber(theOne.addValue)}}
					</view>
				</ClickShowTextVue>
				<view class="theDetail_time">
					{{theOne.timeValue}}
				</view>
				<view class="theDetail_notes">
					<view class="theDetail_notes_box" v-if="theOne.notesValue!=''">
						{{theOne.notesValue}}
					</view>
					<noneTextVue title="该记录没有备注" v-else />
				</view>
				<view class="theDetail_box base_box ">
					<lineOneVue :data="theWeekData" />
					<view class="theDetail_box_title">
						{{theOne.showOne}}七天收支情况
					</view>
				</view>
			</view>
			<view class="theDetail_tool">
				<view class="theDetail_one" @click="toolClick('delete')">
					<image class="theDetail_one_icon" src="@/static/base/delete.png" mode=""></image>
					<view class="theDetail_one_title">删除</view>
				</view>
				<view class="theDetail_one" @click="toolClick('editor')">
					<image class="theDetail_one_icon" src="@/static/base/editor.png" mode=""></image>
					<view class="theDetail_one_title">编辑</view>
				</view>
			</view>
		</view>
	</scroll-view>

</template>

<script setup>
	import ClickShowTextVue from "@/components/base/ClickShowText.vue";
	import lineOneVue from "@/components/lineOne.vue";
	import noneTextVue from '@/components/base/noneText.vue';
	import {
		dateTypeFormat,
		takeBigNumber,
		takeClassList,
		myShowToast,
		reLoading,
		handleLoad
	} from "@/uitls/tool.js"
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref,
		computed
	} from 'vue'
	import store from '@/store/index.js';
	const tagClass = computed(() => theOne.value.showClass == null ? '' : theOne.value.showClass == 1 ? 'incomeColor_' +
		store.state.setting.typeTag : 'expensesColor_' + store.state.setting.typeTag) // 收入支出 颜色样式
	const moneySymbol = computed(() => store.state.setting.MoneySymbol)
	const allData = computed(() => store.state.mainData.allData)
	const theOne = ref()
	const theMonth = ref()
	const props = defineProps({ // 页面传值
		theMonth: String,
		theMonthIndex: String
	})
	onLoad((e) => {
		if (Object.keys(e).length === 0 || e.theMonth === void 0 || e.theMonthIndex === void 0) {
			handleLoad("查看记录出错");
			return;
		}
		if (allData.value?.[e.theMonth]?.[e.theMonthIndex] !== void 0) {
			theMonth.value = props.theMonth
			theOne.value = allData.value[props.theMonth][props.theMonthIndex]
			takeWeekData()
		} else {
			handleLoad("数据加载失败，请检查月份和索引");
		}
	})
	const theWeekData = ref()
	const takeWeekData = () => {
		const getPreviousWeekDates = (startDate) => {
			const dates = [];
			for (let i = 6; i >= 0; i--) { // 从周日开始到周六  
				const date = new Date(startDate);
				date.setDate(startDate.getDate() - i);
				dates.push(date);
			}
			return dates;
		};
		const sumDataByDates = (data, dates) => { // 过滤时间
			// 使用 Set 来存储日期字符串，以提高查找效率  
			const dateSet = new Set(dates);
			const dateMap = new Map();
			// 遍历数据，累加匹配日期的值  
			data.forEach(item => {
				if (dateSet.has(item.timeValue)) {
					const currentValue = parseFloat(item.addValue);
					if (!isNaN(currentValue) && item.showClass===theOne.value.showClass) { // 收入/支出
						dateMap.set(item.timeValue, (dateMap.get(item.timeValue) || 0) + currentValue);
					}
				}
			});
			// 根据原始日期列表的顺序返回累加值数组  
			// 如果日期在数据中不存在，则返回 0  
			return dates.map(date => dateMap.get(date) || 0);
		};

		const weekStart = new Date(theOne.value.timeValue);
		let theWeek = getPreviousWeekDates(weekStart).map(date => dateTypeFormat("YYYY-mm-dd", date));
		const theAllmonthData = allData.value[theMonth.value];
		const filteredData = theAllmonthData.filter(x => x.showOne === theOne.value.showOne); // 获得 该分类的 所有数据
		const outerLineDataT = sumDataByDates(filteredData, theWeek);
		console.log("outerLineDataT",outerLineDataT)
		theWeek = theWeek.map(item => dateTypeFormat("m-d", new Date(item)));

		theWeekData.value = {
			categories: theWeek,
			series: [{
				name: theOne.value.showOne,
				data: outerLineDataT
			}]
		};
	}
	const toolClick = (x) => {
		const delteteThe = () => {
			store.commit("mainData/deleteOneData", {
				theMonth: theMonth.value,
				theOne: theOne.value
			})
			myShowToast("删除成功")
			setTimeout(() => {
				uni.switchTab({
					url: "/pages/index/index"
				})
				reLoading()
			}, 500)
		}
		const gotoEditor = () => {
			let theMonthIndex = allData.value[theMonth.value].indexOf(theOne.value)
			uni.navigateTo({
				url: `/subPages/addPopup/addPopup?theMonth=${theMonth.value}&theMonthIndex=${theMonthIndex}`,
				animationType: 'zoom-fade-out',
			})
		}
		if (x == "delete") {
			uni.showModal({
				title: '提示',
				content: "删除该记录后将无法找回",
				success: function(res) {
					if (res.confirm) {
						delteteThe()
					} else if (res.cancel) {}
				}
			});
		} else if (x == "editor") {
			gotoEditor()
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/style/base.scss";

	.theDetail_scroll {
		height: calc(100vh - $mainHeaderHeight); // 留下底部
	}

	.theDetail {
		display: flex;
		flex-direction: column;
		padding: 1em 0.5em;
		height: 100%;

		.theDetail_main {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			flex-wrap: wrap;

			.theDetail_value {
				margin-top: 0.5em;
				margin-left: -0.5em;
				font-size: $bigFontsize;
			}

			.theDetail_notes {
				width: 90%;
				text-align: center;
				.theDetail_notes_box {
					word-wrap: break-word;
					color: $baseBlack_mid;
				}
			}

			.theDetail_time {
				color: $baseBlack_mid;
				font-size: $midFontsize;
				margin: 1em;
			}

			.theDetail_box {
				margin-top: 1em;
				width: 100%;
				aspect-ratio: 3/2;
				&_title{
					margin-top: 0.5em;
					text-align: center;
					color: $baseBlack_mid;
					font-size: $midFontsize;
				}
			}
		}

		.theDetail_tool {
			flex-shrink: 0;
			position: sticky;
			bottom: 2em;
			left: 50%;
			transform: translate(-50%, 0);
			width: max-content;
			padding: 0.3em;
			margin-top: 3em;
			border-radius: 2em;
			display: flex;
			justify-content: space-around;
			align-items: center;
			background: $baseColor;
			box-shadow: $baseBoxShoadow;

			.theDetail_one {
				margin: 0 0.5em;
				padding: 0.1em;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				border-radius: 0.1em;

				&:active {
					opacity: 0.8;
				}

				&_icon {
					width: $iconSize_small;
					height: $iconSize_small;
				}

				&_title {
					font-size: $smallFontsize ;
					color: $baseWhite;
				}
			}
		}
	}
</style>